<template>
  <div class="my-scores-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>我的成绩</span>
          <el-button type="primary" @click="fetchScores">
            刷新
          </el-button>
        </div>
      </template>

      <el-table
        v-loading="loading"
        :data="scoreList"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column prop="paperName" label="试卷名称" min-width="200" />
        <el-table-column label="完成时间" width="180">
          <template #default="{ row }">
            {{ formatDateTime(row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column label="总分" width="120">
          <template #default="{ row }">
            <span :class="getScoreClass(row.totalScore)">
              {{ row.totalScore !== null && row.totalScore !== undefined ? row.totalScore.toFixed(2) : '未评分' }} 分
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="handleViewResult(row.examId)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getMyScores, type ScoreInfo } from '../../api/exam'

const router = useRouter()
const loading = ref(false)
const scoreList = ref<ScoreInfo[]>([])

// 获取成绩列表
const fetchScores = async () => {
  loading.value = true
  try {
    const res = await getMyScores()
    scoreList.value = res.data || []
  } catch (error) {
    ElMessage.error('获取成绩列表失败')
  } finally {
    loading.value = false
  }
}

// 查看详情
const handleViewResult = (examId: number) => {
  router.push({
    name: 'ExamResult',
    params: { examId: examId.toString() }
  })
}

// 格式化日期时间
const formatDateTime = (dateTimeStr: string) => {
  if (!dateTimeStr) return ''
  const date = new Date(dateTimeStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取得分样式类
const getScoreClass = (score: number | null | undefined) => {
  if (score === null || score === undefined) {
    return 'score-ungraded'
  }
  if (score >= 90) {
    return 'score-excellent'
  }
  if (score >= 60) {
    return 'score-pass'
  }
  return 'score-fail'
}

onMounted(() => {
  fetchScores()
})
</script>

<style scoped>
.my-scores-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.score-excellent {
  color: #67c23a;
  font-weight: bold;
  font-size: 16px;
}

.score-pass {
  color: #409eff;
  font-weight: bold;
  font-size: 16px;
}

.score-fail {
  color: #f56c6c;
  font-weight: bold;
  font-size: 16px;
}

.score-ungraded {
  color: #909399;
  font-weight: bold;
  font-size: 16px;
}
</style>


